<template>
	<view class="">
<!-- 		<u-popup border-radius="10" v-model="popupShow" @open="openHandle" @close="popupHide" mode="bottom" length="80%"
			closeable="true">
			<view class="popupContent">
				<view class="time-wrap">
					<u-time-line id="timeLine">
						<u-time-line-item v-for="(item,index) in regionArr" :key="index"
							v-if="index==0||regionArr[index-1].label" @tap="regionClick(index)">
							<template v-slot:node>
								<view class="node-wrap"
									:class="index<=regionIndex||regionArr[index].label?'bg-success':''"></view>
							</template>
							<template v-slot:content>
								<view :class="index===regionIndex?'success':''">{{item.label||item.placeholder}}</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
				<scroll-view class="regions-wrap" scroll-y="true"
					:style="{height:'calc(100% - 1px - 24rpx - '+timeLineH+'px)'}">
					<view class="regions-wrap-item" v-for="(item,index) in regionItems" :key="index"
						@tap="regionItemClick(index)">
						<view :class="index===regionItemIndex?'success':''">{{item.areaName}}</view>
						<u-icon name="checkbox-mark" v-if="index===regionItemIndex" color="#3FC18A"></u-icon>
					</view>
				</scroll-view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			value: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				popupShow: false,
				regionArr: [{
					label: '',
					placeholder: '请选择城市',
					idx: -1
				}, {
					label: '',
					placeholder: '请选择区/县',
					idx: -1
				}, {
					label: '',
					placeholder: '请选择街道/镇',
					idx: -1
				}, {
					label: '',
					placeholder: '请选择村庄',
					idx: -1
				}],
				regionIndex: 0,
				regionItemIndex: -1,
				regions: [],
				regionItems: [],
				timeLineH: 0,
			}
		},
		watch: {
			show(newValue, oldValue) {
				this.popupShow = newValue
				if (newValue) {}
			}
		},
		created() {},
		methods: {
			openHandle() {
				this.getTimeLineH()

				this.regions = this.$store.getters.region;

				if (this.regionArr[0].label) {
					// console.log('进来了')
					// let t_regionArr = JSON.parse(JSON.stringify(this.regionArr))
					// for (let i = 0; i < t_regionArr.length; i++) {
					// 	if (t_regionArr[i].label) {
					// 		this.regionClick(i, t_regionArr)
					// 		this.regionItemClick(t_regionArr[i].idx, t_regionArr)
					// 	}
					// }
				} else {
					this.regionClick(0)
					this.regionItemClick(0)
				}
			},
			regionClick(index, arr) {
				arr = arr || this.regionArr
				let t_items = this.regions
				for (let i = 0; i < index; i++) {
					t_items = t_items[arr[i].idx].children
				}
				this.regionItems = this.sortZH(t_items)

				this.regionItemIndex = arr[index].idx > -1 ? arr[index].idx : -1
				this.regionIndex = index
			},
			regionItemClick(index, arr) {
				arr = arr || this.regionArr

				for (let i = this.regionIndex; i < arr.length; i++) {
					arr[i].label = ''
					arr[i].idx = -1
				}

				let t_item = this.regionItems[index]
				arr[this.regionIndex].label = t_item.areaName
				arr[this.regionIndex].idx = index
				this.regionItems = this.sortZH(t_item.isLeaf ? this.regionItems : t_item.children)
				this.regionIndex = t_item.isLeaf ? this.regionIndex : this.regionIndex + 1
				this.regionItemIndex = arr[this.regionIndex].idx > -1 ? arr[this.regionIndex].idx : -1

				this.getTimeLineH()

				if (t_item.isLeaf) {
					this.popupShow = false
					let tradeSite = arr.map(item => item.label).join('')
					this.$emit('return', tradeSite)
					this.popupHide()
				}
			},
			sortZH(data) {
				console.log(data)
				data.sort((a, b) => {
					return a.areaName.localeCompare(b.areaName, 'zh')
				})
				return data
			},
			// 获取headerWrap高度
			getTimeLineH() {
				const _this = this;
				this.$nextTick(function() {
					let query = uni.createSelectorQuery().in(_this);
					query.select('#timeLine').boundingClientRect(data => {
						_this.timeLineH = data.height;
					}).exec();
				});
			},
			popupHide() {
				this.$emit('show', false)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupContent {
		position: absolute;
		height: 100%;
		width: 100%;
		padding: 90rpx 20rpx 20rpx;
		box-sizing: border-box;

		.time-wrap {
			border-bottom: 1px solid #c8c7cc;

			.node-wrap {
				width: 20rpx;
				height: 20rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #d0d0d0;
			}
		}

		.regions-wrap {
			padding: 20rpx 0 0;
			box-sizing: border-box;

			&-item {
				padding: 0 20rpx 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
